<template>
	<view class="content">
		<view class='header'>
			<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		</view>
		<view class='bigimgs'>
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :current='current' @change='selectchange'>
				<swiper-item>
					<view class="swiper-item">
						<image class='bigimg' src="/static/images/1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<image class='bigimg' src="/static/images/2.png" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image class='bigimg' src="/static/images/3.png" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class='smallimgs'>
			<view class='smallimg' v-for="(item,index) in imglist" :key="'smallimgs'+index" :class="{'active':active==index}" @click="select(index)">
				<image src="/static/images/1.png" mode=""></image>
			</view>
		</view>
		<view class='buyblock'>
			<view class='xian'></view>
			<view class='line'>
				<view class='lineleft'>智能回收机</view>
				<view class='lineright'><text class='icon'>￥</text>49800</view>
			</view>
			<view class='buybutton'>
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面标题
				title: '设备中心',
				titlecolor: 'black',
				isback: true,
				// 轮播配置
				imglist: ['/static/images/1.png', '/static/images/2.png', '/static/images/3.png', '/static/images/3.png'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				active:0,
				current:0
			}
		},
		onReady() {

		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			select(value){
				this.active=value
				this.current=value
			},
			selectchange(e){
				this.active=e.detail.current
				this.current=e.detail.current
			}

		}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color: #F2F2F2;
		min-height: 100vh;
		padding-top: 1rpx;
		position: relative;

		.header {
			position: fixed;
			left: 0rpx;
			top: 0rpx;
			background-color: #fff;
		}

		.bigimgs {
			margin-top: 200rpx;
			width: 750rpx;

			.bigimg {
				display: block;
				margin: 0px auto;
				width: 532rpx;
				height: 631rpx;
			}
		}

		.smallimgs {
			width: 680rpx;
			margin: 0rpx auto;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.smallimg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 30rpx;
				background-color: #fff;

				image {
					width: 77rpx;
					height: 90rpx;
					display: block;
					margin: 0rpx auto;
					margin-top: 15rpx;
				}
			}

			.active {
				border: 4rpx solid #2F70F1;
			}
		}

		.buyblock {
			background-color: #fff;
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			height: 305rpx;
			width: 750rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			box-sizing: border-box;
			padding: 0rpx 61rpx;

			.xian {
				width: 100rpx;
				height: 4rpx;
				background-color: #212121;
				margin: 0px auto;
				border-radius: 2rpx;
				margin-top: 20rpx;
			}

			.line {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;
				color: #212121;
				font-size: 42rpx;
			}

			.buybutton {
				width: 626rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #2F70F1;
				margin-top: 60rpx;
				color: #fff;
				font-size: 36rpx;
				text-align: center;
				border-radius: 30rpx;
			}
		}
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 631rpx;

	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
